<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>树形结构</title>
		<link rel="stylesheet" type="text/css" href="../css/module/tree.css"/>
		<link rel="stylesheet" type="text/css" href="../css/module/animate.css"/>
		<style type="text/css">
			#departs>span{
				color:#339BF2;
				margin-right: 10px;
			}
			#departs>span.last{
				color:inherit;
			}
		</style>
	</head>
	<body>
		<div id="departs"></div>
 	<script src="../../libs/zepto.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/Jingle.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../demo/js/lib/template.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/module/Jingle.Transition.js" type="text/javascript" charset="utf-8"></script>
	 <script src="../js/plugin/Jingle.Tree.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 var Tree;
	 	$.ajax({
			type:"get",
			url:"./tree.data.json",
			async:true,
			dataType:"json",
			success:function(data){
				data=data.Data;
				data.selector="body";
				data.onBranchSelect=function(depart){
					$("#departs").children().removeClass("last");
					$("#departs").append("<span val="+depart.id+" class='last'>"+depart.name+"</span");
				}
				Tree=new J.Tree(data)
			}
		});
		$("#departs").on("click","span",function(){
			if($(this).hasClass("last")){
				return;
			}
			var id=$(this).attr("val");
			Tree.goTo(id);
			var index=$(this).index();
			console.log(index);
			var sib=$(this).siblings();
			for (var i=0,j=sib.length;i<j;i++) {
				if(i>=index){
					$(sib[i]).remove();
				}
			}
			$("#departs").children().last().addClass("last");
		});
	 </script>
	</body>
</html>
